<template>
  <div style="background: #ececec; padding: 30px">
    <a-card :title="props.classify" :bordered="false">

    <span v-for="(item,idx) in list" :key="item.pmpItemId" style="display:inline-block;margin:8px;">
      <a-badge :count="item.ct" :color="`pink`" :number-style="{ backgroundColor: idx == 0 ? '#f50' :  idx == 1 ? '#108ee9' : idx == 2 ? '#87d068' : 'gray'}">
        <PmpItemName type="text" :id="item.pmpItemId" ></PmpItemName>
      </a-badge>
    </span>
    </a-card>

  </div>
</template>

<script setup>

import pmpHooks from "@/hooks/PmpHooks.js";
import { ref,onMounted } from "vue";

const list = ref([]);

const props = defineProps({
  classify: {
    type: String,
    default: () => '',
  },
})

async function queryPmpIttoStatictisicList(){
    const res = await pmpHooks.queryPmpIttoStatictisicList(props.classify)
    list.value = res.result
}


onMounted(()=>{
    queryPmpIttoStatictisicList()
})

</script>

<style>

</style>